<template>
	<view class="gyd-tabbar">
		<u-tabbar :value="current" @change="changeTabbar" :fixed="true" :placeholder="true" :activeColor="activeColor"
			:safeAreaInsetBottom="true">
			<u-tabbar-item :text="item.name" v-for="(item,index) in menuList" :key="index">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="item.image">
					</image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="item.icon"></image>
				</template>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		defineProps,
		computed,
		onMounted,
		ref,
	} from 'vue';

	defineOptions({
		name: 'gyd-tabbar'
	});

	const props = defineProps({
		current: {
			type: Number,
			default: 0
		},
		activeColor: {
			type: String,
			default: '#181bde'
		}
	});

	const menuList = ref([]);

	onMounted(() => {
		const role = cache.get('role', false);
		const store = cache.get('selStore')

		let params = {
			menu_type: 0,
			role: role,
			merchant_type: store.user_type,
		};
		getMenus(params);
	})

	async function getMenus(params) {
		console.log('params', params);
		let res = await request.get('managemenus/getMenu', params);
		menuList.value = res.data;
	}

	const changeTabbar = (index) => {
		console.log('切换菜单', index);
		if (props.current == index) {
			return;
		}
		uni.reLaunch({
			url: menuList.value[index].url
		});
	}
</script>

<style lang="scss">
	.gyd-tabbar {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>